<template>
  <div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.lable"
        :prop="item.key"
        :align="item.align"
        :width="item.width"
        :type="item.type"
      >
      </el-table-column>

      <el-table-column v-if="action.show" :label="action.lable" :align="action.align" :width="action.width">
        <template slot-scope="scope">
          <slot :rowData="{ index: scope.$index, row: scope.row }"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defaultConfig } from "./defaultConfig";

export default {
  props: ["tableConfig"],
  data() {
    return {
      tableData: [], //api请求回来的数据
      action: {}, //操作数据单独处理
    };
  },
  computed: {
    tableColumns() {

      let columns = this.tableConfig ? this.tableConfig.columns ? this.tableConfig.columns : defaultConfig.columns : defaultConfig.columns;

      this.action = columns.find((item) => item.key == "action");

      return columns.filter((item) => item.show && item.key != "action");
      
    },
  },
  mounted() {
    // 请求数据
    if(this.tableConfig && this.tableConfig.api && this.tableConfig.api.func){
      this.$api[this.tableConfig.api.func](this.tableConfig.api.data,(cb) => {
        cb.forEach( (item, index) => item.index = index + 1 );
        this.tableData = cb;
      });
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
    },
  },
};
</script>

<style>
</style>